<template>
  <div class="tourist">
    <div class="top">
      <p class="title">实时游客统计</p>
      <p class="bg"></p>
      <p class="txt-right">可预约总量 <span>9999</span></p>
    </div>
    <div class="number">
      <span class="number-bg" v-for="(item,index) in people" :key="index">{{ item }}</span>
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill'

const charts = ref()
const people = ref('114514人')

onMounted(()=>{
  // 获取echarts类的实例
  const myCharts = echarts.init(charts.value)
  // 设置配置项
  myCharts.setOption({
    title: {
      // 标题组件
      text: '水球图',
      left: 10,
      textStyle: {
        fontSize: 20,
        color: '#fff'
      }
    },
    // x|y轴组件
    xAxis: {},
    yAxis: {},
    // 系列: 决定展示什么样的图形
    series: [{
      type: 'liquidFill',
      data: [0.6, 0.5, 0.4, 0.3],
      radius: '80%',//半径
    }],
    // 布局组件
    grid: {
      left: '-10px',
      top: 0,
      right: 0,
      bottom: 0
    }
  })
})





</script>

<style lang="scss" scoped>
  .tourist {
    background: url(../../images/dataScreen-main-lb.png) no-repeat;
    background-size: 100% 100%;
    margin-top: 15px;
    .top {
      font-size: 20px;
      color: #fff;
      .title {
        margin-left: 20px;
        margin-bottom: 10px;
        margin-top: 10px;
      }
      .bg {
        background: url(../../images/dataScreen-title.png) no-repeat;
        background-size: 100% 100%;
        width: 68px;
        height: 7px;
        margin-left: 20px;
        
      }
      .txt-right {
        text-align: right;
        margin-right: 20px;
        span {
          color: yellowgreen;
        }
      }
    }
    .number {
      margin-top: 20px;
      display: flex;
      padding: 0 10px;
      .number-bg {
        flex: 1;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: url(../../images/total.png) no-repeat;
        background-size: 100% 100%;
        color: #29fcff;
        font-size: 24px;
      }
    }
    .charts {
      width: 100%;
      height: 250px;
      margin-top: 10px;
    }
  }
</style>
